<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>css介绍</title>
    <style>
        /* Vscode 快速格式化代码: shift+alt+f */
        /* 
        a:link 没有点击过的(访问过的)链接
        a:visited 点击过的(访问过的)链接
        a:hover 鼠标经过的那个链接
        a:active 鼠标正在按下还没有弹起鼠标的那个链接
        */
        /* 
        :focus 伪类选择器用于选取获得焦点的表单元素。

        焦点就是光标，一般情况 类表单元素才能获取
        */

        /* 元素背景颜色默认值是 transparent（透明） */
        /* input:focus{
            background-color: bisque;
        }
        input{
            outline: none;
        } */
        body{
            background: rgba(101,101,101,.3);
            height: 1000px;
            /* background-image 定义元素的背景图片 */
            /* background-image: url(../images/1big.webp); */
            /* background-repeat 设置元素背景图像的平铺 */
            background-repeat: no-repeat;
            /* background-position 属性可以改变图片在背景中的位置 */
            /* 
            1、参数是方位名词

            如果指定的两个值都是方位名词，则两个值前后顺序无关，比如 left top 和 top left 效果一致

            如果只指定了一个方位名词，另一个值省略，则第二个值默认居中对齐

            2、参数是精确单位

            如果参数值是精确坐标，那么第一个肯定是 x 坐标，第二个一定是 y 坐标

            如果只指定一个数值，那该数值一定是 x 坐标，另一个默认垂直居中

            3、参数是混合单位

            如果指定的两个值是精确单位和方位名词混合使用，则第一个值是 x 坐标，第二个值是 y 坐标
            */
            background-position: top;
            /* background-attachment 属性设置背景图像是否固定或者随着页面的其余部分滚动。 */
            /* scroll/fixed */
            /* background-attachment 后期可以制作视差滚动的效果 */

            background-attachment: scroll;

            /* 
            背景合写样式：
            background: 背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置;
            */
           
        }
        div{
            font-size: 20px;
            color: #108881;
            border: 10px solid white;
            width: 200px;
            text-align: center;
            margin: auto;
        }

        /* 
        网页布局三大核心
        盒子模型
        浮动
        定位
        */

        /* 
        border-collapse 属性控制浏览器绘制表格边框的方式。它控制相邻单元格的边框。
        */
        /* 
        内边距对盒子大小的影响：
        如果盒子已经有了宽度和高度，此时再指定内边框，会撑大盒子。
        如何盒子本身没有指定width/height属性, 则此时padding不会撑开盒子大小。
        如果保证盒子跟效果图大小保持一致，则让 width/height 减去多出来的内边距大小即可
        */

        /* 
        外边距可以让块级盒子水平居中的两个条件：
        盒子必须指定了宽度（width）。
        盒子左右的外边距都设置为 auto 。
        以上方法是让块级元素水平居中，行内元素或者行内块元素水平居中给其父元素添加 text-align:center 即可。
        */


        /* 
        
        相邻块元素垂直外边距的合并

        当上下相邻的两个块元素（兄弟关系）相遇时，如果上面的元素有下外边距 margin-bottom，
        下面的元素有上外边距 margin-top ，则他们之间的垂直间距不是 margin-bottom 与 margin-top 之和。
        取两个值中的较大者这种现象被称为相邻块元素垂直外边距的合并

        解决方案：
        尽量只给一个盒子添加 margin 值。

        */


        /* 
        嵌套块元素垂直外边距的塌陷

        对于两个嵌套关系（父子关系）的块元素，父元素有上外边距同时子元素也有上外边距，
        此时父元素会塌陷较大的外边距值。

        可以为父元素定义上边框。
        可以为父元素定义上内边距。
        可以为父元素添加 overflow:hidden。
        */
    </style>
</head>

<body>
    <!-- <input type="text" value="你好啊"> -->

    <div>
        <p>你好啊</p>
    </div>

</body>

</html>